<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title><?php echo $dataset['name'];?></title>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <script src="/js/vue.min.js"></script>
    <script src="/js/jquery-1.10.2.min.js"></script>
	<script typet="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <link rel="stylesheet" type="text/css" href="https://api.uu235.com/web/front/static/css/style.css"/>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>

<div id="wrap" v-cloak>
    <template v-for="(vo,index) in dataset.goods">
        <a  v-if="vo.goods_id>0" @click="toDetail(vo)" :data-id="vo.goods_id" :data-title="vo.goods_name" href="javascript:void(0);">
            <img :src="vo.goods_logo" style="width:100%;">
        </a>
    </template>
</div>

<script>
var vm = new Vue({
	el: '#wrap',
	data: {
			dataset: <?php echo json_encode($dataset, JSON_UNESCAPED_UNICODE);?>,
	},
	methods: {
		toDetail:function(vo){
		    if(parseInt(vo.goods_id)>0) {
                wx.miniProgram.navigateTo({
                    url: '/pages/product/productDetail/productDetail?id=' + vo.goods_id
                });
            }
		}
	}
})
</script>
<style>
    .title {
        display: flex;
        line-height: 3rem;
        margin: 1rem;
        font-size: 1.2rem;
        text-align: center;
        border: rgb(102, 102, 102) 1px solid;
        border-radius: 4px;
    }

    .title li {
        flex: 1;
    }

    .title li.active {
        background: rgb(102, 102, 102);
        color: #fff;
    }

    .buy-count {
        display: flex;
        position: relative;
        padding: 1rem;
        margin-top: 1rem;
    }

    .buy-count:before, .buy-count:after {
        position: absolute;
        left: 0;
        right: 0;
        height: 1px;
        background: #f2f2f2;
        content: '';
    }

    .buy-count:before {
        top: 0;
    }

    .buy-count:after {
        bottom: 0;
    }

    .input-order {
        width: 78%;
        border: none;
        outline: none;
        text-align: right;
    }

    .counter {
        display: flex;
        position: absolute;
        top: -.6rem;
        width: 8rem;
        right: 0;
        height: 2.5rem;
        line-height: 2rem;
        text-align: center;
        border: #e3e3e3 1px solid;
        border-radius: 4px;
    }

    .counter input {
        width: 3rem;
        text-align: center;
        border: none;
        border-left: #e3e3e3 1px solid;
        border-right: #e3e3e3 1px solid;
        outline: none;
    }

    .counter span {
        flex-basis: 3rem;
    }

    .ticket {
        position: relative;
        padding-top: 1rem;
    }

    .ticket:before {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 10px;
        background: #f2f2f2;
        content: '';
    }

    #header img {
        width: 100%;
        max-width: 100%
    }
</style>
</body>
</html>
